<%@ page import="BaseClass.PetInfo" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: 郭宇轩
  Date: 2020/11/14
  Time: 8:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>选择你的宠物</title>
    <style type="text/css">
        @import url("../static/css/Header.css");
    </style>

</head>

<%@ include file="../MainPage/Header.jsp"%>

<div id="hidenOne" style="display: none"></div>

<!-- 获取装载数据的PetInfo-->
<% List<PetInfo> PI = (List<PetInfo>) session.getAttribute("AllPetInfo");%>
<table border="1">
    <tr>
        <th>宠物种类</th>
        <th>宠物名字</th>
        <th>宠物介绍</th>
        <th>宠物价格</th>
        <th></th>
    </tr>

    <% for(PetInfo p : PI){ %>
    <tr>
        <td><a href="Category.jsp?petClass=<%=p.getPetClass()%>"><%= p.getPetClass()%></a></td>

        <td>
            <a href="item.jsp?pid=<%=p.getPid() %>" id="<%=p.getPid()%>"
               onmousemove="showDetail('<%=p.getPid()%>',event)"
               onmouseleave="hideDetail()"
            >
                <%= p.getPetName()%>
            </a>
        </td>

        <td><a><%= p.getDescription()%></a></td>
        <td><a><%= p.getCost()%></a></td>
        <td><a href="../AddCartServlet?pid=<%=p.getPid() %>" type="text" onclick="">加入购物车</a></td>
    </tr>
    <% } %>
</table>
</body>
</html>
<%--商品展示用--%>
<script>
    function showDetail(i,event) {
        var x = event.clientX;
        var y = event.clientY;
        var pid = i;
        var div = document.getElementById("hidenOne");
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4 && xhr.status==200){
                var text = xhr.responseText;
                var childs = "<img src=" + text +" alt="+ text +"/>"
                div.style.width = "430px";
                div.innerHTML = childs;
                div.style.display = "block";
                div.style.top = y;
                div.style.left = x;
                div.style.position = "relative"
                div.style.zIndex = "100";
                div.style.backgroundColor = "whitesmoke";
            }
        }
        xhr.open("GET","${pageContext.request.contextPath}/ShowItemInfo?pid="+pid);
        xhr.send(null);
    }

    function hideDetail() {
        var hidenDiv = document.getElementById("hidenOne");
        hidenDiv.style.display = "none";
    }
</script>
